<template>
  <div class="recharge_mod" :class="themeClass">
    <v-loading v-if="loading" />

    <v-nav :title="$t('Recharge.Recharge')" v-if="isDayTime === false" title_color="#fff" :class="themeClass">
      <img src="@/assets/img/Headset@2x(1).png" alt="" @click="$router.push('/customerservice')" />
    </v-nav>
    <v-nav :title="$t('Recharge.Recharge')" v-if="isDayTime === true">
      <img src="@/assets/img/Headset@2x(1).png" alt="" @click="$router.push('/customerservice')" />
    </v-nav>
    <div class="recharge_mod_box">
      <div class="recharge_mod_box_qr-code">
        <div class="qrCode">
          <img v-if="channelDetail.currency_qr" :src="channelDetail.currency_qr" @click="handleImageClick(channelDetail.currency_qr)" />
          <div class="overlay" v-else>
            <img src="@/assets/img/SmileySad@2x.png" />
          </div>
        </div>
        <!-- <van-button color="#DAAB51" @click="downloadImage(channelDetail.currency_qr, 'result')">{{ $t('Recharge.Save QR code') }}</van-button> -->
        <p :class="bgColor">{{ channelDetail.currency }}({{ channelDetail.currency_network }})</p>
        <p :class="bgColor">{{ channelDetail.currency_address }}</p>
        <v-copy class="copyStyle" :text="$t('Recharge.Copy deposit address')" :copyText="channelDetail.currency_address" />
      </div>
      <div class="recharge_mod_box_amount">
        <p :class="bgColor">{{ $t('Recharge.Deposit amount') }}</p>

        <div class="recharge_mod_box_amount_input">
          <van-field v-model="chargingQuantity" @input="handlePrice(chargingQuantity)" :class="themeClass1" :placeholder="$t('Recharge.Minimum deposit amount') + channelDetail.currency_mix" />
        </div>
        <p :class="bgColor">{{ $t('Recharge.Upload screenshot of payment details') }}</p>
        <div class="recharge_mod_box_amount_upload">
          <van-field name="uploader">
            <template #input>
              <van-uploader v-model="fileList" :max-count="1" :max-size="5 * 1024 * 1024" @oversize="onOversize" :after-read="uploadFile" class="upload" />
            </template>
          </van-field>
        </div>
      </div>
    </div>
    <div class="moomoo-bottom">
      <div class="moomoo-bottom-submit" :class="themeClass">
        <van-button round block color="#DAAB51" @click="submit">{{ $t('Recharge.confirm submission') }}</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
export default {
  name: 'Recharge',
  data() {
    return {
      channelDetail: {},
      isDayTime: false,
      chargingQuantity: '', // 数量
      loading: false,
      fileList: []
    }
  },
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  activated() {
    this.getRechargeDetail()
  },
  methods: {
    handleImageClick(imgsrc) {
      ImagePreview({
        images: [imgsrc],
        closeable: true
      })
    },
    // 限制保留八位小数
    handlePrice(val) {
      if (val !== '' && val.substr(0, 1) === '.') {
        val = ''
      }
      val = val.replace(/^0*(0\.|[1-9])/, '$1') //解决 粘贴不生效
      val = val.replace(/[^\d.]/g, '') //清除“数字”和“.”以外的字符
      val = val.replace(/\.{2,}/g, '.') //只保留第一个. 清除多余的
      val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      val = val.replace(/^(\-)*(\d+)\.(\d\d\d\d\d\d\d\d).*$/, '$1$2.$3') //只能输入八个小数
      if (val.indexOf('.') < 0 && val !== '') {
        if (val.substr(0, 1) === '0' && val.length === 2) {
          val = val.substr(1, val.length)
        }
      }
      this.chargingQuantity = val
    },
    // downloadImage(imgsrc, name) {
    //   //下载图片地址和图片名
    //   var image = new Image()
    //   // 解决跨域 Canvas 污染问题
    //   image.setAttribute('crossOrigin', 'anonymous')
    //   image.onload = function () {
    //     var canvas = document.createElement('canvas')
    //     canvas.width = image.width
    //     canvas.height = image.height
    //     var context = canvas.getContext('2d')
    //     context.drawImage(image, 0, 0, image.width, image.height)
    //     var url = canvas.toDataURL('image/png') //得到图片的base64编码数据
    //     var a = document.createElement('a') // 生成一个a元素
    //     var event = new MouseEvent('click') // 创建一个单击事件
    //     a.download = name || 'photo' // 设置图片名称
    //     a.href = url // 将生成的URL设置为a.href属性
    //     a.dispatchEvent(event) // 触发a的单击事件
    //   }
    //   image.src = imgsrc
    // },
    async getRechargeDetail() {
      this.loading = true
      await this.$https.get('/platform/getRechargeDetail?id=' + this.$route.params.id).then(res => {
        this.channelDetail = res.data
      })
      this.loading = false
    },
    async uploadFile(file) {
      if (file.file.type !== 'image/png' && file.file.type !== 'image/jpeg') {
        this.$toast(this.$t('info.info19'))
        this.fileList = []
        return
      }
      file.status = 'uploading'
      var formData = new FormData()
      formData.append('file', file.file)
      await this.$https.post('/ajax/upload', formData).then(res => {
        if (res != undefined && res.code == 1) {
          file.status = 'done'
          return (this.fileList[0].url = res.data.file.full_url)
        } else {
          file.status = 'failed'
        }
      })
    },
    onOversize() {
      this.$toast(this.$t('info.info18'))
    },
    submit() {
      if (this.fileList.length != 0 && this.fileList[0].status == 'uploading') {
        this.$toast(this.$t('info.info9'))
        return
      }

      if (Number(this.chargingQuantity) < Number(this.channelDetail.currency_mix)) {
        this.$toast(this.$t('Recharge.Minimum deposit amount') + this.channelDetail.currency_mix)
        return
      }

      this.loading = true
      let params = {
        recharge_id: this.channelDetail.id,
        amount: this.chargingQuantity,
        payment_screenshot: this.fileList.length > 0 ? this.fileList[0].url : ''
      }
      this.loading = false
      this.$https.post('/wallet/submitRecharge', params).then(res => {
        if (res != undefined && res.code == 1) {
          this.$router.go(-2)
        }
      })
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
